<template>
  <div class="app-container">
    <div class="main-content1">
      <div id="main" style="width: 100%;height:400px;"></div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/tjbb/user";
import * as echarts from "echarts"

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      listLoading: true,
      myChart: null,
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        console.log(response.data.rows);
        let arrayData = response.data.rows.map((item) => item.day);
        let arrayValue = response.data.rows.map((item) => item.users);
        // 确保DOM元素存在
        var dom = document.getElementById("main")
        if (!dom) {
          console.error("DOM元素#main未找到")
          return
        }
        this.myChart = echarts.init(document.getElementById("main"))
        let option = {
          xAxis: {
            type: 'category',
            data: arrayData,
            // 柱状图显示字体
            label: {
              show: true,
              position: 'top'
            },
          },
          yAxis: {
            type: 'value',
          },
          // 标题显示
          legend: {
            data: ['用户增长数']
          },
          // 鼠标经过显示
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          series: [
            {
              name: '用户增长数', //legend中显示的名称
              data: arrayValue,
              type: 'bar'
            }
          ],
          color: '#19D4AE',
        };
        this.myChart.setOption(option)
        this.listLoading = false;
      });
    },
  },
};
</script>
